<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>对联悬浮框</title>
   <style>
      #div1{width:100px;height:150px;background:green;position:absolute;right:0;button:0;}   
   </style>
   <script>
       window.onscroll=function(){
	      var oDiv=document.getElementById("div1");
          var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
		  //oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+"px";
		  startMove((document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop);	   
	   };
       var timer=null;
	   function startMove(iTarget){
	   
	      var oDiv=document.getElementById("div1");
	      clearInterval(timer);
	      timer=setInterval(function(){
		  var speed=(iTarget-oDiv.offsetTop)/6;		  				   
		  speed=speed>0?Math.ceil(speed):Math.floor(speed);
		  if(oDiv.offsetTop==iTarget){
		       clearInterval(timer);
		   }else{
		   		 document.getElementById("txt1").value=oDiv.offsetTop;  		   
		       oDiv.style.top=oDiv.offsetTop+speed+"px";
		   }		   		   		   		  
		  },30);
	   }
   
   </script>
</head>
<body style="height:2000px;">
  <input type="text" id="txt1" style="position:fixed">
  <div id="div1">我是一个悬浮框</div>


</body>
</html>